<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--360浏览器优先以webkit内核解析-->
    <title>home</title>

    <link rel="shortcut icon" href="favicon.ico"> <link href="css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="css/common.css">
    <link href="css/index2.css" rel="stylesheet">
</head>

<body class="gray-bg">
    <div class="wrapper">
        <!-- 基本信息 -->
        <div class="row"> 
            <div class="col-sm-12">
                <div class="ibox ibox-content">                
                    <h5><i>上午好</i>，<strong>lh1039@qq.com 刘慧！</strong><span>尽情享受<i>上午</i>宁静的时光吧！</span></h5>               
                    <div class="row m37p">
                        <div class="col-sm-3">
                            <div class="account bgL">
                                <input type="text" value="0.00"/>
                                <p>账户余额（元）</p>
                            </div>
                        </div>
                        <div class="col-sm-9">
                            <div class="bgR">
                                <div class="col-sm-3 account">
                                    <div class="borderRight">
                                         <input type="text" value="0.00"/>
                                    <p>可用金额（元）</p>
                                    </div>                                  
                                </div>
                                <div class="col-sm-3 account">
                                    <div class="borderRight">
                                        <input type="text" value="0.00"/>
                                        <p>今日流水（元）</p>
                                    </div>                                   
                                </div>
                                <div class="col-sm-3 account">
                                    <div class="borderRight">
                                        <input type="text" value="0.00"/>
                                        <p>今日收入（元）</p>
                                    </div>                                   
                                </div>
                                <div class="col-sm-3 account">
                                    <div style="border:none;">
                                        <input type="text" value="0.00"/>
                                        <p>今日支付（元）</p>
                                    </div>                                   
                                </div>                               
                            </div>
                        </div>
                    </div>
                    <div class="m37p">
                        <input type="button" class="btn btn-primary" value="提现"/> 
                        <input type="button" class="btn btn-default" value="批量付款"/> 
                        <input type="button" class="btn btn-default" value="管理账户"/>
                    </div>                   
                </div>         
            </div>                     
        </div>

        <!-- 银行卡信息 -->
        <div class="row m17p">
            <div class="col-sm-12">
                <div class="ibox-content">                
                    <h5><strong>银行卡信息</strong></h5>               
                    <div class="row m37p">
                        <div class="col-sm-12">
                            <div class="fl mr30p">
                                <div class="bankCard">
                                    <div>                                   
                                        <img class="bankImg" src="images/ccb.png" />
                                        <span class="fr fsize ccb">储蓄卡</span>
                                    </div>
                                <!--<div>
                                        <i class="fa"></i>
                                        <span>中国建设银行</span>
                                        <span class="fr">储蓄卡</span>
                                    </div> -->
                                    <div class="decoration"></div>
                                    <div class="cardNumber">
                                        <span><strong>**** **** **** 6198</strong></span>
                                    </div>
                                    <div>
                                        <span>***唐</span>
                                        <span class="fr del"><a href="#">删除此卡</a></span>
                                    </div>
                                </div>
                            </div>                           
                            <div class="fl mr30p">
                                <div class="bankCard borderDashed textCenter">                               
                                    <a href="#" class="addCard"> 
                                        <img src="images/plus.png" />
                                    添加银行卡
                                    </a>
                                </div>
                            </div>                                              
                        </div>                  
                    </div>               
                </div>         
            </div>        
        </div>

        <!-- 7日收支趋势 -->
        <div class="row m17p">
            <div class="col-sm-12">
                <div class="ibox-content">                
                    <h5><strong>近7日收支趋势图</strong></h5>               
                    <div class="row m37p">
                        <div class="col-sm-8 col-sm-offset-2">
                           <div>
                                <img src="images/chart1.jpg" />
                           </div>
                        </div>
                    </div>           
                </div>         
            </div>        
        </div>

        <!-- 7日收支明细 -->
        <div class="row m17p">
            <div class="col-sm-12">
                <div class="ibox-content">                
                    <h5><strong>近7日收支明细(08.14-08.20)</strong></h5>               
                    <div class="row m17p">
                        <div class="col-sm-12">                                                                                
                            <div id="tab">
                            <!-- <ul>
                                    <li class="act">收支明细</li>
                                    <li>提现明细</li>
                                    <li>批量付款明细</li>             
                                </ul> -->
                                <ul style="margin-left:-40px;">
                                    <li class="act"><a>收支明细</a></li>
                                    <li><a>提现明细</a></li>
                                    <li><a>批量付款明细</a></li>             
                                </ul>
                                <div class="details" style="display:block;">
                                    <div class="ibox float-e-margins">
                                        <div class="ibox-content ibox-pd0">
                                            <table class="table table-striped1 table-hover table-bordered">
                                                <thead>
                                                    <tr>
                                                        <th>时间</th>
                                                        <th>发生金额</th>
                                                        <th>类型</th>
                                                        <th>说明</th>
                                                    </tr>
                                                </thead>
                                                <tbody class="transaction">
                                                    <tr>
                                                        <td>2015.08.20  14:32:38</td>
                                                        <!-- <td class="line"><input type="text" value="-268">
                                                        </td> -->
                                                        <td class="money">-268.00</td>
                                                        <td>提现</td>
                                                        <td> 提现至尾号为4425的银行卡</td>
                                                    </tr>
                                                    <tr>
                                                        <td>2015.08.18  00:00:01</td>
                                                      <!--   <td class="line"><input type="text" value="+1,000.00">
                                                        </td> -->
                                                        <td class="money">+1000.00</td>
                                                        <td>交易流水</td>
                                                        <td> 微信交易，商户单号：wx32342342</td>
                                                    </tr>
                                                    <tr>
                                                        <td>2015.08.17  08:00:01</td>
                                                      <!--   <td class="line"><input type="text" value="-6,336.00">
                                                        </td> -->
                                                        <td class="money">-6336.00</td>
                                                        <td>批量代付</td>
                                                        <td>批量代付10笔资金给王xx等人</td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>                                  
                                </div>
                                <div class="details">                          
                                    <div class="ibox float-e-margins">
                                        <div class="ibox-content ibox-pd0">
                                            <table class="table table-striped1 table-hover table-bordered">
                                                <thead>
                                                    <tr>
                                                        <th>时间</th>
                                                        <th>发生金额</th>
                                                        <th>类型</th>
                                                        <th>说明</th>
                                                    </tr>
                                                </thead>
                                                <tbody class="transaction">
                                                    <tr>
                                                        <td>2015.08.20  14:32:38</td>                                                    
                                                        <td class="money">+1000.00</td>
                                                        <td>提现</td>
                                                        <td> 提现至尾号为4425的银行卡</td>
                                                    </tr>
                                                    <tr>
                                                        <td>2015.08.18  00:00:01</td>                                             
                                                        <td class="money">-268.00</td>
                                                        <td>交易流水</td>
                                                        <td> 微信交易，商户单号：wx32342342</td>
                                                    </tr>
                                                    <tr>
                                                        <td>2015.08.17  08:00:01</td>                                               
                                                        <td class="money">-6336.00</td>
                                                        <td>批量代付</td>
                                                        <td>批量代付10笔资金给王xx等人</td>
                                                    </tr>
                                                </tbody>                                             
                                            </table>
                                        </div>
                                    </div>                                  
                                </div>
                                <div class="details">                     
                                    <div class="ibox float-e-margins">
                                        <div class="ibox-content ibox-pd0">
                                            <table class="table table-striped1 table-hover table-bordered">
                                                <thead>
                                                    <tr>
                                                        <th>时间</th>
                                                        <th>发生金额</th>
                                                        <th>类型</th>
                                                        <th>说明</th>
                                                    </tr>
                                                </thead>
                                                <tbody class="transaction">
                                                    <tr>
                                                        <td>2015.08.20  14:32:38</td>                                                    
                                                        <td class="money">-268.00</td>
                                                        <td>提现</td>
                                                        <td> 提现至尾号为4425的银行卡</td>
                                                    </tr>
                                                    <tr>
                                                        <td>2015.08.18  00:00:01</td>                                             
                                                        <td class="money">-6336.00</td>
                                                        <td>交易流水</td>
                                                        <td> 微信交易，商户单号：wx32342342</td>
                                                    </tr>
                                                    <tr>
                                                        <td>2015.08.17  08:00:01</td>                                               
                                                        <td class="money">+1000.00</td>
                                                        <td>批量代付</td>
                                                        <td>批量代付10笔资金给王xx等人</td>
                                                    </tr>
                                                </tbody>                                                
                                            </table>
                                        </div>
                                    </div>                                  
                                </div>
                            </div>                                                
                        </div>
                    </div>           
                </div>         
            </div>        
        </div>
    </div>
    <!-- 全局js -->
    <script src="js/jquery.min.js?v=2.1.4"></script>
    <script src="js/bootstrap.min.js?v=3.3.6"></script>
    <!-- <script src="js/plugins/layer/layer.min.js"></script> -->

    <!-- 自定义js -->
    <script src="js/content.js"></script>

    <!--flotdemo-->
    <script type="text/javascript">
        function resizeInput() {
            $(this).attr('size', $(this).val().length);
        }
        $('input[type="text"]').keyup(resizeInput).each(resizeInput);
        $('input[type="text"]').attr("readonly","readonly");
        // $('input[type="text"]').removeAttr("readonly");                
    </script>
    <script type="text/javascript">
        function tab(tabID,box){  
            $(tabID).click(function(){  
                $(tabID).removeClass('act'); //先将所有同级去掉act 
                $(box).hide();   //所有同级box隐藏   、
                
                $(this).addClass('act');   //当前li显示
                $(box).eq($(this).index()).show();  
            });  
        }  
        $(function(){  
            //选项卡  
            tab("#tab li",'.details');          
        });
   </script>

   <script type="text/javascript">
        //收支明细表格数据
        var tables=$(".transaction");  
        var tds=tables.find(".money");
        for(var i=0;i<tds.length;i++){
            //不同颜色区分正负数
            if(tds[i].innerText<0){                
                tds[i].style.color="#6fc954";
            }else{               
                tds[i].style.color="#ff6666";
            } 
            //格式化金额                     
            tds[i].innerHTML=outputmoney(tds[i].innerText);
        }
        function outputmoney(number) {
            number = number.replace(/\,/g, "");
            if(isNaN(number) || number == "")return "";
            number = Math.round(number * 100) / 100;
                if (number < 0)
                    return '-' + outputdollars(Math.floor(Math.abs(number) - 0) + '') + outputcents(Math.abs(number) - 0);  //负数
                else
                    return '+' +outputdollars(Math.floor(number - 0) + '') + outputcents(number - 0);    //正数
        } 
        //格式化金额，千位用 ‘,’
        function outputdollars(number) {
            if (number.length <= 3)
                return (number == '' ? '0' : number);
            else {
                var mod = number.length % 3;
                var output = (mod == 0 ? '' : (number.substring(0, mod)));
                for (j = 0; j < Math.floor(number.length / 3); j++) {
                    if ((mod == 0) && (j == 0))
                        output += number.substring(mod + 3 * j, mod + 3 * j + 3);
                    else
                        output += ',' + number.substring(mod + 3 * j, mod + 3 * j + 3);
                }
                return (output);
            }
        }
        //保留2位小数
        function outputcents(amount) {
            amount = Math.round(((amount) - Math.floor(amount)) * 100);
            return (amount < 10 ? '.0' + amount : '.' + amount);
        }
    </script>
 
</body>

</html>
